<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: chocolate;
        }
    </style>
</head>
<body>


<!--<script>
    const template = document.getElementById('my-template').content.cloneNode(true);
    document.body.appendChild(template);
</script>

<template id="my-component-template">
    <style>
        p { color: green; }
    </style>
    <p>这是一个被影子DOM保护的段落。</p>
</template>-->

<template id="my-component-template">
    <style>
        p { color: green; }
    </style>
    <p>这是一个被影子DOM保护的段落。</p>
</template>

<my-component/>
<script>
    class MyComponent extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({ mode: 'closed' });
            const template = document.getElementById('my-component-template').content.cloneNode(true);
            shadowRoot.appendChild(template);
        }
    }

    customElements.define('my-component', MyComponent);
</script>

<!--<my-element></my-element>
<script>
    class MyElement extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({ mode: 'open' });
            shadowRoot.innerHTML = `
      <style>
        p { color: blue; }
      </style>
      <p>你好，我有影子DOM！</p>
    `;
        }
    }

    customElements.define('my-element', MyElement);
</script>-->
</body>
</html>
